
// 导入路由
import router,{asyncRoutes, resetRouter} from "@/router";
import store from "./store";
// 进度条的包和样式
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style

import getPageTitle from "./utils/get-page-title";


// to:要去哪里
// from:从哪里来
/* next:他是一个函数. 
        如果直接放行 next()
        如果跳转到其他页面  next(其他页) */
// 页面在进行跳转之前一定会经过这里

// 路由守卫

 // 用数组方法把白名单存进去
const whitelist=['/login','/404']
// 前置守卫
router.beforeEach(async(to,from,next)=>{
    NProgress.start()
    console.log('页面在进行跳转之前一定会经过这里');
    console.log('去哪里',to);
    console.log('从哪里来',from);

    // 动态设置网页的标题
    // document.title=`人力资源系统-${to.meta.title}`
    document.title=getPageTitle(to.meta.title)

    // 判断是否有token
 const token=store.state.user.token

 if(token){
    console.log('你已经登录');
    if(to.path==='/login'){
        console.log('已经登录,不能重复登录,直接去首页');
        next('/')
        NProgress.done()  //关闭进度条
    }else{
        console.log('目前是登录状态,访问其他页面  可以放行');
        // 触发axios函数 获取用户信息 存储到vuex中
        // store.dispatch(模块名/actions函数名)   //这里是获取信息 不要传数据
       
        // 判断vuex中是否存储过用户信息, 如果有,就不需要在获取了  这里取反 就需要获取 反则不需要
       if(!store.state.user.userInfo.userId)   {
        resetRouter()  //清空路由  解决退出登录,再重新登录后的 路由重复问题 (在router 路由配置中 index的最后面有封装)
        // await store.dispatch('user/getUserInfo') //获取用户信息
        //1 需要获取到用户的页面级别的权限信息
        const menus= await store.dispatch('user/getUserInfo') 
        console.log('menus',menus);  //得到用户的权限 
        console.log(asyncRoutes,'asyncRoutes');
        // 2   根据权限信息 动态添加路由和渲染左侧菜单
        // router.addRoutes(asyncRoutes)  //asyncRoutes是 路由组件中的动态路由模块化 的数组对象  有8个  我们先得到  后面筛选出我们自己要的
        //  筛选自己要的动态路由 权限
        const filterRouters=asyncRoutes.filter(item=>{
            return menus.includes(item.children[0].name)
        })
        console.log('filterRouters',filterRouters);//得到自己需要的3个权限
        router.addRoutes(filterRouters)   //把自己需要的动态路由权限传人
        // 解决刷新页面  出现404的问题
        // 这里动态添加的路由是一个异步的过程,还没有加载完成就直接跳转了页面,会出现白屏问题   解决方法用(next({...to,replace:true}))
        router.addRoutes([{ path: '*', redirect: '/404', hidden: true }])  
        // 分析左侧菜单为什么不能够渲染
        // 完成渲染左侧菜单
        // 需要将动态路由添加的路由 添加到vuex中
        // store.commit('menus/updataMenus',asyncRoutes)   //这是新增全部的路由   后期用自己需要的
        store.commit('menus/updataMenus',filterRouters)  //把自己需要的动态路由添加到左侧菜单栏
        next({...to,replace:true})   //动态路由页面加载完成,重新进入页面  (解决白屏问题)
       }
       else{
        next()
       }
      
    }
 }else{
    console.log('你没有登录');
    // 用数组方法把白名单存进去  这里调用这个方法
    if(whitelist.includes(to.path)){
        console.log('你拥有白名单,可以直接访问,放行');
        next()
    }else{
        console.log('你没有登录不能访问,请先登录');
        next('/login')
        NProgress.done() //关闭进度条
    }
 }
  
})

//  如何开启进度条NProgress.start()   什么时候开启 页面跳转之前
//  如何关闭进度条NProgress.done()   什么时候关闭 页面加载完毕之前
// 后置守卫
router.afterEach(()=>{
    NProgress.done() //页面跳转完毕 关闭进度条
})


